<template>
    <div class="table-box">
        <ProTable ref="proTable" title="dealerManage列表" :columns="columns" :request-api="getTableList"
            :init-param="initParam" :data-callback="dataCallback">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="openDiolg('新增', null)">
                    新增经销商机构
                </el-button>
            </template>
            <!--表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link="link" :icon="View" @click="openDiolg('查看', scope.row)">
                    查看
                </el-button>
                <el-button type="primary" link="link" :icon="EditPen" @click="openDiolg('编辑', scope.row)">
                    编辑
                </el-button>
                <el-button type="primary" link="link" icon="Delete" @click="deleteAccount(scope.row)">
                    删除
                </el-button>
            </template>
        </ProTable>
        <MyDiolg ref="dialogRef" />
    </div>
</template >

<script setup="setup" lang="tsx" name="dealerManage">
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import MyDiolg from "./components/Form.vue";
import {
    listDealerManage,
    getDealerManage,
    delDealerManage,
    addDealerManage,
    updateDealerManage
} from "@/api/system/dealerManage";
import { ColumnProps } from "@/components/ProTable/interface";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh
} from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
const proxy = getCurrentInstance()?.proxy;

// 获取 ProTable 元素，调用其获取刷新数据方法
const proTable = ref<any>();

const dialogRef = ref(null);
// 初始化请求参数
const initParam = reactive({});

// 数据处理
const dataCallback = (data: any) => {
    return { list: data.rows, total: data.total };
};

const columns: any = [
    {
        prop: 'dealerName',
        label: '机构名称',
        search: {
            el: 'input'
        }
    },
    {
        prop: 'createTime',
        label: '创建时间',
        search: {
            el: 'date-picker',
            span: 1,
            props: {
                type: 'date',
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
            }
        }
    },
    {
        prop: 'status',
        label: '状态',
        render: (scope) => {
            if (scope.row.status == 0) {
                return <el-tag type="primary">正常</el-tag>
            }  else if (scope.row.status == 1) {
                return <el-tag type="danger">禁用</el-tag>
            }
        },
        enum: [
            {
                label: '合作',
                value: 0
            },
            {
                label: '禁用',
                value: 1
            },
        ],
        search: {
            el: 'select'
        }
    },
    {
        prop: 'operation',
        label: '操作',
        fixed: 'right',
        width: 330
    }
];

// 请求列表接口
const getTableList = (params: any) => {
    return listDealerManage(params);
};

const deleteAccount = async (params: any) => {
    const ids = params.id
    await useHandleData(delDealerManage, ids, '是否删除编号为' + ids + '的数据');
    proTable.value.getTableList();
};

const openDiolg = (title: string, row: any) => {
    const params = {
        title,
        isView: title === "查看",
        rowData: { ...row },
        api: title === "新增" ? addDealerManage : title === "编辑" ? updateDealerManage : undefined,
        getTableList: proTable.value?.getTableList,
    };
    dialogRef.value?.acceptParams(params);
};
</script>